<template>
    <div class="flex-container">
        <div class="left">
            <div class="list">
                <Tree ref="refTree" @toggleOrgId="toggleOrgId" ></Tree>
            </div>
        </div>
        <div class="right">
            <div class="header">
                <div>全部楼层</div>
                <div  v-if="dataList.length > 0">
                    <el-button size="small" style="height: 30px;" @click="closeAdd" v-if="arr.length > 0">取消选中</el-button>
                    <el-button size="small" style="margin-left: 15px;height: 30px;" @click="onAdd(2)"
                         type="primary">批量上传</el-button>
                    <el-button size="small" style="margin-left: 15px;height: 30px;" @click="onDel"
                        type="primary">批量删除</el-button>
                </div>
            </div>
            <div class="content infinite-list" v-infinite-scroll="load" style="overflow:auto"
                infinite-scroll-immediate="infinitescroll" infinite-scroll-disabled="disabled">
                <div class="content_div" v-if="dataList.length > 0">
                    <div :class="['everyImg', arr.includes(item.id) ? 'everyImgChecked' : '']" v-for="item in dataList"
                        :key="item.id">
                        <!-- <el-image :src="item.image" class="image" v-if="item.image" @click="onDetails(item.id)"></el-image> -->
                        <img :src="item.image" v-if="item.image" class="image" @click="onDetails(item)">
                        <el-image class="image2" v-else>
                            <div slot="error" class="image-slot" @click="onAdd(1, item.id)">
                                <i class="el-icon-picture-outline"></i>
                                <span>点击上传</span>
                            </div>
                        </el-image>
                        <div :class="['picNum', arr.includes(item.id) ? 'picNumChecked' : '']">{{ item.name }}</div>
                        <span :class="['floorselect', arr.includes(item.id) ? 'floorselectChecked' : '']"
                            @click.stop="clickFloorselect(item.id)"><i class="el-icon-check"></i></span>
                    </div>
                </div>
                <div v-else style="
                        height: 90%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        color: #909399;
                        ">
                    暂无楼层
                </div>

                <span v-if="loading && dataList.length > 0">加载中...</span>
                <span v-if="noMore && dataList.length > 0">没有更多了</span>
            </div>
        </div>
        <drawingAdd ref="refdrawingAdd" :idList="arr" :addindex="addindex" :idListid="idListid"></drawingAdd>
        <drawingDetails ref="refdrawingDetails" :listAll="listAll"></drawingDetails>
        <drawingEdit ref="refdrawingEdit" :editInfo="editInfo"></drawingEdit>
    </div>
</template>

<script>
import {
    reqImageBatchDel,
    reqImagePage,
} from "@api/api.js";
import Tree from "./components/Tree";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";
import drawingAdd from "./components/drawingAdd.vue";
import drawingDetails from "./components/drawingDetails.vue";
import drawingEdit from "./components/drawingEdit.vue";

export default {
    props: ['orgId'],
    name: "",
    components: {
        Tree,
        Pagination,
        drawingAdd,
        drawingDetails,
        drawingEdit
    },
    mixins: [tableStyleMixin],
    data() {
        return {
            dataList: [],
            page: 1,
            limit: 9,
            img: require("@assets/images/account_bg.png"),
            wugj: require("@assets/images/datav/wugj.png"),
            spaceId: '',
            loading: false,
            infinitescroll: false,
            noMore: false,
            arr: [],
            addindex: '1',
            idListid: '',
            listAll: [],
            editInfo:{}
        };
    },

    watch: {},
    computed: {
        ...mapState(["user"]),
        disabled() {
            return this.loading || this.noMore
        }
    },
    methods: {
        //初始化
        clearinit() {
            this.dataList = []
            this.$refs.refTree.clearinit()
        },
        getBuildings(orgId) {
            this.$refs.refTree.getBuildings(orgId)
        },
        async closeEditDialog() {
            this.dataList = [];
            this.page = 1;
            this.arr = []
            this.noMore = false;
            await this.getImagePage();
            await this.getImagePageAll();
        },
        // 取消选中
        closeAdd() {
            this.arr = []
        },
        // 点击高亮 取消高亮
        clickFloorselect(id) {
            if (this.arr.includes(id)) {
                this.arr = this.arr.filter(e => e != id)//过滤掉不等于当前id的
            } else {
                this.arr.push(id)
            }
        },
        // 图纸详情
        onDetails(item) {
            this.editInfo = JSON.parse(JSON.stringify(item));
            this.$refs.refdrawingEdit.dialogVisible = true;
            // this.$refs.refdrawingDetails.getGetMark(item.id)
            // this.$refs.refdrawingDetails.getactive(item.id) // 点击时切换到对应的幻灯片以及tab下标
            // this.$refs.refdrawingDetails.dialogVisible = true;
        },
        // 批量上传
        onAdd(index, id) {
            if(this.arr.length == 0 && index==2) return this.$modal.notifyWarning('请先勾选平面图');
            this.addindex = index;
            if (index == 1) {
                this.idListid = id
            }
            this.$refs.refdrawingAdd.dialogVisible = true;
        },
        // 批量删除
        onDel() {
            if(this.arr.length == 0) return this.$modal.notifyWarning('请先勾选平面图');
            this.$confirm("确定删除所选的楼层平面图吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const res = await reqImageBatchDel({
                        idList: this.arr
                    });
                    if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
                    this.$modal.notifySuccess("删除成功!");
                    this.dataList = [];
                    this.page = 1;
                    this.arr = []
                    this.getImagePage();
                })
                .catch(() => { });
        },
        //楼层平面图分页
        async getImagePage() {
            const res = await reqImagePage(this.page, this.limit, {
                spaceId: this.spaceId,
            });
            //   console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            if (this.page > 1 && (!res.data.rows || !res.data.rows.length)) {
                this.noMore = true;
            }
            this.dataList = [...this.dataList, ...res.data.rows]
        },
        //楼层平面图分页
        async getImagePageAll() {
            const res = await reqImagePage(this.page, 99, {
                spaceId: this.spaceId,
            });
            this.listAll = res.data.rows.filter(item => item.image != '')
        },
        // 切换
        toggleOrgId(data) {
            // console.log(data);
            if (data.spaceId == "") {
                this.dataList = [];
                return;
            }
            this.page = 1;
            this.spaceId = data.spaceId;
            this.infinitescroll = false;//防止触发load
            this.dataList = []
            this.noMore = false;
            this.arr = [];
            this.getImagePage();
            this.getImagePageAll();
        },
        load() {
            // console.log('加载');
            this.loading = true
            setTimeout(() => {
                this.page++;
                this.getImagePage();
                this.loading = false
            }, 200)
        },
    },
    mounted() {
    },
};
</script>

<style scoped lang="less">
@import url("~@views/orgManage/orgList.less");

.flex-container {
    width: 100%;
    height: 100%;
    display: flex;
    background: @primaryHeaderBgcolor;
    padding: 1.5%;
    box-sizing: border-box;
}

.right {
    width: 78%;
    border: 1px solid @primaryBorderColor;
}

.left {
    width: 20%;
    margin-right: 1.5%;
    border: 1px solid @primaryBorderColor;
}

.header {
    color: @primaryThemeTxtColor;
    display: flex;
    justify-content: space-between;
    padding: 0 1.5%;
    box-sizing: border-box;
}

.content {
    height: 100%;
    padding-bottom: 30px;
    box-sizing: border-box;

    .content_div {
        display: flex;
        flex-wrap: wrap;
    }

    .everyImg {
        width: 32%;
        height: 230px;
        border-radius: 3px;
        margin-bottom: 40px;
        background: @primaryBgcolor7;
        margin-right: 2%;
        overflow: hidden;
        position: relative;
        border: 1px solid transparent;
        box-sizing: border-box;

        .image {
            width: 100%;
            height: auto;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        .image2 {
            width: 100%;
            height: 100%;
            background: @primaryBgcolor7;
            color: #565E65;

            ::v-deep .image-slot {
                cursor: pointer;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                >i {
                    font-size: 45px;
                }

                >span {
                    margin-top: 10px;
                    font-size: 15px;
                }
            }

        }

        .picNum {
            position: absolute;
            bottom: 0px;
            left: 0;
            width: 52px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 14px;
            background: #7568F2;
            border-radius: 0 3px 0 0;
            color: #fff;
            opacity: 0.7;
        }

        .picNumChecked {
            background: #7568F2;
            color: #fff;
            opacity: 1;
        }

        .floorselect {
            z-index: 99;
            width: 0;
            height: 0;
            border-color: #7568F2 transparent;
            border-width: 35px 0 0 35px;
            border-style: solid;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
            opacity: 0.7;

            i {
                color: #fff;
                opacity: 0.5;
                position: absolute;
                top: -35px;
                right: 0;
                font-size: 20px;
            }
        }

        .floorselectChecked {
            border-color: #7568F2 transparent !important;
            opacity: 1;

            i {
                opacity: 1;
            }
        }
    }

    .everyImg:nth-of-type(3n) {
        margin-right: 0;
    }

    .everyImgChecked {
        border: 1px solid #7568F2;
    }

    >span {
        color: @primaryThemeTxtColor;
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        display: inline-block;
    }
}
</style>